<template>
  <div id="suggestlList">
    <div class="send-suggest">
      <div class="tip">
        <md-notice-bar mode="link" icon="info-solid">场景普法：业主如何要求召开业主大会表决</md-notice-bar>
      </div>
      <div class="input-item">
        <h2>提议标题</h2>
        <div class="title-input-block">
          <input type="text" v-model="title" placeholder="（标题限制30字）" maxlength="30" />
        </div>
        <p class="input-tip">业主提议召开业主大会，需要征集社区20%以上业主的联名同意</p>
      </div>
      <div class="input-item">
        <h2>提议概述</h2>
        <div class="textarear-block">
          <textarea
            v-model="content"
            placeholder="（概述限制80字） 业主大会拥有社区管理最高权限，召开后，可以投票表决包括解散改选业委会、物业公司服务等在内的所有社区公共事务。"
          ></textarea>
        </div>
      </div>
      <div class="input-item">
        <h2>详文附件</h2>
        <div class="upload-item">
          <div class="word-tip">
            <span>只限上传图片(最多10张)</span>
            <span class="content">
              <md-icon name="info"></md-icon>范本-如何写提议
            </span>
          </div>
          <div class="upload-input">
            <md-image-reader
              name="reader"
              @select="onReaderSelect"
              @complete="onReaderComplete"
              @error="onReaderError"
              is-multiple
            ></md-image-reader>
            <md-icon name="camera" size="lg" color="#666"></md-icon>
            <p>上传图片</p>
            <span v-show="fileArr.length > 0">{{fileArr.length}}</span>
          </div>
          <!-- <input id="inputBox" @change="uploadFile($event)" type="file" multiple /> -->
        </div>
        <ul class="pre-img-list">
          <li
            class="image-reader-item"
            v-for="(img, index) in fileArr"
            :key="index"
            :style="{
                'backgroundImage': `url(${img})`,
                'backgroundPosition': 'center center',
                'backgroundRepeat': 'no-repeat',
                'backgroundSize': 'cover'
              }"
          >
            <md-tag
              class="image-reader-item-del"
              size="small"
              shape="quarter"
              fill-color="#111A34"
              type="fill"
              font-color="#fff"
              @click.native="onDeleteImage(index)"
            >
              <md-icon name="close"></md-icon>
            </md-tag>
          </li>
        </ul>
      </div>
      <div class="time-item">
        <h2>征集天数</h2>
        <div class="time-input" @click="isPickerShow = true">
          <span>{{pickerValue.label}}</span>
          <md-icon name="arrow-right" size="md" color="#999"></md-icon>
        </div>
      </div>
      <div class="tip">
        <md-notice-bar type="activity" multi-rows icon="info-solid">业主可到社区胶卷栏目征集，也可分享链接到业主微信群征集</md-notice-bar>
      </div>
      <div class="op-btn">
        <md-button class="btn" @click="resetSuggest" type="default" size="small" round inline>重置</md-button>
        <!-- <md-button class="btn" size="small" round type="default" inline @click="saveSuggest">暂存</md-button> -->
        <md-button class="btn" @click="submit" size="small" round type="primary" inline>发布</md-button>
      </div>
      <!-- </md-scroll-view> -->
    </div>
    <md-picker
      ref="picker"
      v-model="isPickerShow"
      :data="pickerData"
      @confirm="onPickerConfirm()"
      title="选择天数"
    ></md-picker>
    <md-image-viewer
      v-model="isViewerShow"
      :list="fileArr"
      :has-dots="true"
      :initial-index="viewerIndex"
    ></md-image-viewer>
    <!-- 验证密码 -->
    <div class="verify-vote-layer" v-if="showVoteLayer">
      <p class="error-text" v-if="isErrorText">{{errorText}}</p>
      <div class="inner-content">
        <h3>请验证您的密码</h3>
        <p class="tip">{{firstPassword}}~是您的密码首字母</p>
        <div class="sel-items">
          <input type="password" v-model="passwordValue" placeholder="请输入您的密码" />
        </div>
        <p class="modify-password">
          <span @click="nvaModifyPassword">忘记密码？</span>
        </p>
        <div class="btn-block">
          <div class="cancel" @click="showVoteLayer = false">取消</div>
          <div class="confirm" @click="confirmVote">确定</div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import {
  NoticeBar,
  Icon,
  InputItem,
  Picker,
  Field,
  FieldItem,
  Captcha,
  Toast,
  Dialog,
  ImageViewer
} from "mand-mobile";
import https from "@/https";
import config from "@/config";
import imageProcessor from "mand-mobile/components/image-reader/image-processor"; //图片压缩

export default {
  components: {
    [NoticeBar.name]: NoticeBar,
    [InputItem.name]: InputItem,
    [Icon.name]: Icon,
    [Picker.name]: Picker,
    [Field.name]: Field,
    [FieldItem.name]: FieldItem,
    [Captcha.name]: Captcha,
    [Dialog.name]: Dialog,
    [ImageViewer.name]: ImageViewer
  },
  name: "suggestlList",
  data() {
    return {
      selTab: "p1",
      is_xz: "0", //提议类型:0向业主委员会发起提议 1业主发起提议
      title: "", //标题
      content: "", //内容
      // file: "", //文件地址
      fileArr: [], // 上传文件
      isViewerShow: false,
      viewerIndex: 0,
      isPickerShow: false, //打开选天数
      pickerData: [
        [
          { label: "7天", value: "7" },
          { label: "8天", value: "8" },
          { label: "9天", value: "9" },
          { label: "10天", value: "10" },
          { label: "11天", value: "11" },
          { label: "12天", value: "12" },
          { label: "13天", value: "13" },
          { label: "14天", value: "14" },
          { label: "15天", value: "15" },
          { label: "16天", value: "16" },
          { label: "17天", value: "17" },
          { label: "18天", value: "18" },
          { label: "19天", value: "19" },
          { label: "20天", value: "20" },
          { label: "21天", value: "21" },
          { label: "22天", value: "22" },
          { label: "23天", value: "23" },
          { label: "24天", value: "24" },
          { label: "25天", value: "25" },
          { label: "26天", value: "26" },
          { label: "27天", value: "27" },
          { label: "28天", value: "28" },
          { label: "29天", value: "29" },
          { label: "30天", value: "30" }
        ]
      ],
      pickerValue: { label: "7天", value: "7" }, //天数

      firstPassword: "", //密码首字
      passwordValue: "", //验证密码
      showVoteLayer: false, // 投票验证框
      isErrorText: false, //密码验证错误弹窗
      errorText: "密码输入有误" //错误文本
    };
  },
  computed: {
    mobile() {
      return this.$store.getters.getUserInfo.mobile;
    }
    // codeContent() {
    //   let mobile = this.mobile;
    //   return (
    //     this.codeText +
    //     this.mobile.slice(0, 3) +
    //     "****" +
    //     this.mobile.slice(7, 11)
    //   );
    // }
  },
  methods: {
    // 选择天数
    onPickerConfirm() {
      const values = this.$refs[`picker`].getColumnValues();
      this[`pickerValue`] = values[0];
    },
    // 重置
    resetSuggest() {
      this.title = "";
      this.content = "";
      this.fileArr = [];
      this.pickerValue = { label: "7天", value: "7" };
      Toast.succeed("已重置", 1500);
    },
    // 查看上传图
    showViewer(index) {
      this.viewerIndex = index;
      this.isViewerShow = true;
    },
    onDeleteImage(index) {
      const demoImageList = this.fileArr || [];
      demoImageList.splice(index, 1);
      this.$set(this.fileArr, demoImageList);
    },
    // 发布
    submit() {
      let title = this.title;
      let content = this.content;
      if (title == "") {
        Toast.failed("请输入标题");
        return;
      }
      if (content == "") {
        Toast.failed("请输入内容");
        return;
      }
      if (this.fileArr.length == 0) {
        Toast.failed("请上传附件");
        return;
      }
      this.firstPassword = this.$store.state.userInfo.acronym_password;
      this.showVoteLayer = true;
      this.passwordValue = "";
    },
    confirmVote() {
      if(this.passwordValue == ""){
         Toast.failed("请输入验证密码");
        return;
      }
      let days = this.pickerValue.value;
      let is_xz = this.is_xz;
      let title = this.title;
      let mobile = this.mobile;
      let content = this.content;
      let file = this.fileArr.join(",");
      let qid = this.$store.state.residentialType.qid;
      let uid = this.$store.state.userInfo.id;
      let params = {
        is_xz,
        title,
        mobile,
        content,
        file,
        days,
        qid,
        uid
      };
      https
        .fetchPost(config.faBu, params)
        .then(res => {
            this.showVoteLayer = false;
          if (res.data.code == 1) {
            Toast.succeed("发布成功");
            setTimeout(() => {
              this.$router.go(-2);
            }, 1000);
          } else {
            Toast.failed(res.data.msg, 2000);
            return;
          }
        })
        .catch(err => {
          console.log(err);
        });
    },
    //  上传图片
    onReaderSelect() {
      Toast.loading("图片上传中...");
    },
    onReaderComplete(name, { dataUrl }) {
      imageProcessor({
        dataUrl,
        width: 900,
        // height: 1800,
        quality: 0.6
      }).then(({ dataUrl }) => {
        let _this = this;
        if (_this.fileArr.length < 10) {
          let callBack = function(res) {
            if (res.data.code == 1) {
              let obj = res.data.data.url;
              _this.fileArr.push(obj);
              Toast.hide();
              Toast.succeed("添加成功", 2000);
            } else {
              Toast.hide();
              Toast.failed("图片上传失败,请重试");
            }
          };
          this.saveBase64Image(dataUrl, callBack);
        } else {
          Toast.failed("图片不能超过10张");
        }
      });
    },
    onReaderError(name, { msg }) {
      Toast.failed(msg);
    },
    // 64图转url
    saveBase64Image(dataUrl, callBack) {
      let params = {
        image: dataUrl
      };
      https
        .fetchPost(config.base64Image, params)
        .then(res => {
          callBack(res);
        })
        .catch(err => {
          console.log(err);
        });
    },
     nvaModifyPassword() {
      this.$router.push({
        path: "/modifyPassword"
      });
    }
  },
  created() {
    let is_xz = this.$route.query.is_xz;
    this.selTab = this.$route.query.selTab || "p1";
  }
};
</script>

<style  lang="scss" scoped>
$themeColor: #444444;
$themeGold: #d7b987;
.md-notice-bar {
  z-index: 1;
}
.md-image-reader {
  z-index: 1;
}
#suggestlList {
  .tip {
    padding-bottom: 30px;
  }
  .input-item {
    margin-bottom: 10px;
    background: #fff;
    h2 {
      padding-left: 30px;
      height: 80px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .input-tip {
      font-size: 24px;
      color: $themeGold;
      margin: 20px 0;
      padding: 0 30px;
      transform: scale(0.9);
    }
    .title-input-block {
      padding: 0 30px;
      input {
        width: calc(100% - 30px);
        font-size: 28px;
        outline: none;
        line-height: 40px;
        padding: 10px;
        border: 1px solid #eee;
        background: #f8f8f8;
        border-radius: 10px;
        color: #333;
      }
    }
    .textarear-block {
      padding: 0 30px;
      textarea {
        width: calc(100% - 30px);
        height: 180px;
        border: none;
        resize: none;
        outline: none;
        font-size: 28px;
        line-height: 44px;
        padding: 10px;
        color: #333;
        border: 1px solid #eee;
        background: #f8f8f8;
        border-radius: 10px;
      }
    }
    // 上传文件
    .upload-item {
      padding: 0 40px;
      height: 90px;
      display: flex;
      align-items: center;
      z-index: 1;
      justify-content: flex-end;
      .upload-input {
        position: relative;
        width: 330px;
        height: 60px;
        display: flex;
        align-items: center;
        justify-content: center;
        border: 1px solid #ddd;
        border-radius: 12px;
        p {
          text-align: center;
          font-size: 25px;
          color: #444;
          background: #fff;
          margin-left: 10px;
        }
        span {
          position: absolute;
          right: 30px;
          top: -18px;
          line-height: 40px;
          text-align: center;
          color: #fff;
          font-size: 22px;
          background: #f02a2a;
          border-radius: 50%;
          width: 40px;
          height: 40px;
        }
      }
      .word-tip {
        display: flex;
        flex-direction: column;
        margin-right: 30px;
        span {
          width: 280px;
          font-size: 24px;
          line-height: 30px;
          color: #666;
          margin-bottom: 5px;
          &.content {
            display: flex;
            color: $themeGold;
            align-items: center;
            i {
              line-height: 30px;
              margin-right: 6px;
            }
          }
        }
      }
    }
    .pre-img-list {
      display: flex;
      flex-wrap: wrap;
      padding: 20px 30px;
      li {
        margin: 10px;
        position: relative;
        width: 200px;
        padding-bottom: 200px;
        border-radius: 4px;
        background-size: cover;
        overflow: hidden;
        .image-reader-item-del {
          position: absolute;
          top: 0;
          right: 0;
          z-index: 3;
          opacity: 0.8;
          .md-icon-close {
            font-size: 24px;
          }
        }
      }
    }
  }
  .time-item {
    display: flex;
    justify-content: space-between;
    background: #fff;
    padding: 0 30px;
    h2 {
      height: 100px;
      display: flex;
      align-items: center;
      font-size: 30px;
      &::before {
        content: "";
        display: block;
        height: 38px;
        border-left: 6px solid $themeGold;
        margin-right: 28px;
      }
    }
    .time-input {
      display: flex;
      align-items: center;
      justify-content: flex-end;
      width: 400px;
      height: 100px;
      span {
        margin-right: 15px;
        font-size: 30px;
        color: #444;
      }
    }
  }
  .op-btn {
    height: 120px;
    margin-bottom: 40px;
    display: flex;
    justify-content: center;
    align-items: center;
    .btn {
      margin: 0 20px;
      width: 190px;
    }
    .reset-btn {
      background: #e1e1e1;
      color: #666;
    }
  }
  //  <!-- 验证密码 -->
  .verify-vote-layer {
    position: fixed;
    top: 0;
    left: 0;
    bottom: 0;
    right: 0;
    z-index: 998!important;
    background: rgba(0, 0, 0, 0.6);
    .error-text {
      position: absolute;
      top: 0;
      width: 100%;
      height: 50px;
      line-height: 50px;
      font-size: 26px;
      color: #fff;
      text-align: center;
      background: #e22c1f;
    }
    .inner-content {
      position: absolute;
      left: 50%;
      top: 50%;
      transform: translate(-50%, -50%);
      background: #fff;
      width: 560px;
      border-radius: 12px;
      padding: 30px 30px 0;
      h3 {
        display: flex;
        justify-content: center;
        font-size: 32px;
        color: #333;
        padding-bottom: 50px;
        padding-top: 20px;
      }
      .tip{
        display: flex;
        justify-content: center;
        align-items: center;
        font-size: 26px;
        height: 60px;
        width: 350px;
        padding: 0 30px;
        color: rgb(226, 11, 11);
      }
      .sel-items {
        display: flex;
        justify-content: center;
        input {
          border: none;
          outline: none;
          width: 350px;
          height: 60px;
          font-size: 30px;
          color: #444;
          background: #f9f9f9;
          padding: 0 20px;
        }
      }
      .modify-password {
        text-align: right;
        color: #2f86f6;
        font-size: 24px;
        padding: 30px 0;
        span {
          padding: 10px;
        }
      }
      .btn-block {
        display: flex;
        border-top: 1px solid #f1f1f1;

        div {
          display: flex;
          align-items: center;
          justify-content: center;
          width: 50%;
          height: 100px;
          color: #2f86f6;
          font-size: 30px;
          &.cancel {
            color: #999;
            position: relative;
            &::after {
              content: "";
              position: absolute;
              top: 20px;
              right: 0;
              width: 1px;
              height: 60px;
              background: #f2f2f2;
            }
          }
        }
      }
    }
  }
}
</style>
